<style lang="scss" scoped>
    .dept-main{background: #fff;padding: 30px 24px 200px;}
    .main-title{
        width:100%;
        height:40px;
        background:rgba(229,247,255,1);
        border-radius:4px;
        border:1px solid rgba(142,212,255,1);
        font-size:14px;
        color:rgba(102,106,128,1);
        margin-bottom:20px;

        display: flex;
        box-sizing: border-box;
        align-items: center;
    }

    .main-title img {
        width:14px;
        height: 14px;
        margin:0 6px 0 10px;
    }

    .main-title span{color: #bbb;font-size: 14px;}
    .tree-box{
        height:480px;
        border: 1px solid #eee;
        width: 49%;
        /* margin-right: 3%; */
        float: left;
    }
    .tree-head{
        height:36px;
        background: #fcfdff;
        padding: 10px 20px;
        display: flex;
        align-items:center;
        border-bottom:1px solid rgba(225,231,235,1);
        display:flex;
        justify-content:space-between;
        border-radius:2px 2px 0px 0px;
    }

    .tree-head a{
        font-size:14px;
        color:rgba(89,121,248,1);
    }

    .tree-body{height: 420px;overflow-y: auto;padding: 30px 20px;      box-sizing: border-box;}
    .tree-foot{height: 40px;padding: 10px 20px;}
    .form-box{
        height: 480px;
        border:1px solid #eee;
        width: 49%;
        float: right;
    }

    .form-box-head{
        height:36px;
        background: #fcfdff;
        text-align: center;
        line-height:36px;
        font-size: 16px;
        color:rgba(0,0,0,1);
        display: flex;
        justify-content:space-between;
        padding: 10px 20px;
        border-bottom:1px solid rgba(225,231,235,1);
    }


    .form-box-head a {
        font-size:14px;
        color:rgba(89,121,248,1);
        margin-left:20px;
    }

    .dept-form-box{padding: 50px 40px 0 30px;}

    .m-inner .el-tree-node__content {
        height: 32px;
        line-height: 32px;
    }

</style>
<style>
    .dept-form-box .el-input{width: 100%;}
    .dept-form-box .el-select{width: 100%;}
    /*.dept-form-box .el-form-item{margin-bottom: 34px;}*/
    .add-save-btn{width: 140px;}
</style>
<template>
    <section>
        <div class="dept-main">
            <div class="main-title"><img data-v-d8050750="" src="http://jhsy-img.caizhu.com/FgEYebYNYNIIDbE1wB1J5Hwp6cH3" alt="">可以在这里添加公司各个部门，员工必须属于某个组织机构</div>
            <div class="clearfix">
                <div class="tree-box">
                    <div class="tree-head ">
                        <span>组织架构</span>
                        <a href="javascript:;" @click="addDepartment" class="btn">添加部门</a>
                    </div>
                    <div class="tree-body">
                        <el-tree
                                :props="propsName"
                                :data="departmentList"
                                node-key="DepartmentID"
                                highlight-current
                                ref="tree"
                                :filter-node-method="filterNode"
                                @node-click="getnode"
                                default-expand-all="true">
                        </el-tree>
                    </div>
                </div>
                <div class="form-box">
                    <div class="form-box-head">
                        <span>部门详情</span>
                        <div>
                            <a href="javascript:;" @click="editInfo" :disabled="topDepartmentID==departmentID" class="btn" v-if="!!curData && !editFlag">修改</a>
                            <a href="javascript:;" @click="delDepartment" :disabled="topDepartmentID==departmentID" class="btn" v-if="!!curData && !editFlag">删除</a>
                        </div>

                    </div>
                    <div class="dept-form-box">
                        <el-form label-width="130px">
                            <el-form-item label="上级部门">
                                <span v-show="!editFlag">{{form.ParentName}}</span>
                                <span v-show="form.ParentID == 0 ">无</span>
                                <el-select v-show="!!editFlag && form.ParentID !=0" v-model="form.ParentID" filterable :disabled="!editFlag" placeholder="请输入上级部门">
                                    <el-option
                                            v-for="item in departmentSelectList"
                                            :key="item.DepartmentID"
                                            :label="item.DepartmentName"
                                            :value="item.DepartmentID">
                                    </el-option>
                                </el-select>
                                <!-- <el-input v-show="topDepartmentID==departmentID&&!addFlag" class="input" v-model="form.ParentName" placeholder="请输入上级部门" disabled></el-input> -->
                            </el-form-item>

                            <el-form-item label="名称" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
                                <span v-show="!editFlag">{{form.DepartmentName}}</span>
                                <el-input class="input" v-model="form.DepartmentName" placeholder="请输入部门名称" maxlength="10" :disabled="!editFlag" v-show="!!editFlag"></el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <span v-show="!editFlag">{{form.DepartmentDesc}}</span>
                                <el-input class="input" v-model="form.DepartmentDesc" placeholder="请输入介绍内容" maxlength="140" :disabled="!editFlag" v-show="!!editFlag"></el-input>
                            </el-form-item>

                            <el-form-item label="">
                                <div class="clearfix mt20" v-show="editFlag">
                                    <el-button type="primary" class="add-save-btn" @click="saveAddJunior">保存</el-button>
                                    <!-- <el-button v-show="addFlag" @click="saveAddJunior(1)">保存并继续添加</el-button> -->
                                </div>
                            </el-form-item>


                        </el-form>
                    </div>
                </div>
            </div>

        </div>


    </section>
</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            propsName: {
                label: 'DepartmentName',
                children: 'Child'
            },
            departmentList:[],
            departmentSelectList:[],
            employeeSelectList:[],
            form:{},
            departmentID:'',
            topDepartmentID:'',
            topLevel:'',
            editFlag:false,
            addFlag:false,
            curData:false,
            path: [
                {
                    'name':'设置',
                    'path':'/organization/dept-list'
                },
                {
                    'name':'组织架构'
                }
            ]

        }
    },
//    mixins: [mixinMethods],
    methods: {
        getnode(data,node,vueComponent){
            this.curData = true
            this.editFlag = false;
            this.addFlag = false;
            this.departmentID = data.DepartmentID;
            this.name = data.DepartmentName
            this.getDepartmentInfo();
        },

        delDepartment(){

            this.$confirm('删除该部门，将会把员工移动到 “未分配员工” ', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.post('/com/department/del', qs.stringify({
                    departmentID:this.form.DepartmentID
                })).then((res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.getDepartmentTree(1);
                        this.$message.success('删除成功')
                    }else {
                        this.$message.error(d.msg)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        editInfo(){
            this.editFlag = true;
        },
        addJunior(){
            this.addFlag = true;
            this.editFlag = true;
            this.form.DepartmentName = '';
            this.form.DepartmentDesc = '';
            this.form.ParentID = this.form.DepartmentID;
            this.form.HeaderEmployeeID = '';
            this.form.Level = this.form.Level;
        },
        saveAddJunior(goon){
            if(this.addFlag){
                axios.post('/com/department/add', qs.stringify({
                    departmentName:this.form.DepartmentName,
                    departmentDesc:this.form.DepartmentDesc,
                    parentID:this.form.ParentID,
                    headerEmployeeID:this.form.HeaderEmployeeID,
                    level:this.form.Level
                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.getDepartmentTree();
                        this.getDepartmentList();
                        this.$message.success('添加成功');
                        if(goon==1){
                            this.form.DepartmentName = '';
                            this.form.DepartmentDesc = '';
                            this.form.HeaderEmployeeID = '';
                        }else {
                            this.addFlag = false;
                            this.editFlag = false;
                        }
                    }else {
                        this.$message.error(d.msg)
                    }
                });
            }else {
                axios.post('/com/department/edit', qs.stringify({
                    departmentID:this.form.DepartmentID,
                    departmentName:this.form.DepartmentName,
                    departmentDesc:this.form.DepartmentDesc,
                    parentID:this.form.ParentID,
                    headerEmployeeID:this.form.HeaderEmployeeID,
                    level:this.form.Level
                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.$message.success('保存成功');
                        this.editFlag = false;

                        // 动态更新数据
                        this.getDepartmentTree(1);
                    }else {
                        this.$message.error(d.msg)
                    }
                });
            }

        },

        getDepartmentInfo(){
            axios.post('/com/department/departmentInfo', qs.stringify({
                departmentID:this.departmentID
            })).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.form = d.data.DepartmentInfo;
                }else {
                    this.$message.error(d.msg)
                }
            });
        },
        getDepartmentTree(firstFlag){
            axios.post('/com/department/getDepartmentTree', qs.stringify({
            })).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.departmentList = d.data.Row;
                    if(firstFlag){
                        this.departmentID = this.departmentList[0].DepartmentID;
                        this.topDepartmentID = this.departmentList[0].DepartmentID;
                        this.topLevel = this.departmentList[0].Level;
                        this.getDepartmentInfo();
                    }
                }else {
                    this.$message.error(d.msg)
                }
            });
        },

        goUpDown(type){
            axios.post('/com/department/moveStep', qs.stringify({
                departmentID:this.form.DepartmentID,
                type:type
            })).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.getDepartmentTree();
                    this.$message.success(type==1?'上移成功':'下移成功');
                    this.addFlag = false;
                    this.editFlag = false;
                }else {
                    this.$message.error(d.msg)
                }
            });
        },

        addDepartment(){
            this.curData = false
            this.addFlag = true;
            this.editFlag = true;
            this.form.DepartmentName = '';
            this.form.DepartmentDesc = '';
            this.form.ParentID = this.form.DepartmentID;
            this.form.HeaderEmployeeID = '';
            this.form.Level = this.topLevel;
            this.form.department = this.topDepartmentID;
        },

        getDepartmentList(){
            axios.post('/com/department/getDepartmentList', qs.stringify({
            })).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.departmentSelectList = d.data.DepartmentList;
                }else {
                    this.$message.error(d.msg)
                }
            });
        }
    },
    mounted: function(){
        this.getDepartmentTree(1);
        this.getDepartmentList();
        this.$store.commit('setPath', this.path)
        axios.post('/com/employee/getEmployeeList', qs.stringify({
        })).then( (res) => {
            var d = res.data;
            if(d.flag == 1){
                this.employeeSelectList = d.data.Row;
                this.employeeSelectList.unshift({EmployeeID:'0',Username:'暂无'})
            }else {
                this.$message.error(d.msg)
            }
        });
    }
}


</script>
